import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { DetailWrapper } from './styled'
import {  actionCreater } from './store'
import { withRouter } from 'react-router-dom'

class Detail extends PureComponent {

    render(){
        const { title, content} = this.props
        return <div>
            <DetailWrapper>
                <h1 className="title">
                    {title}
                </h1>
                <div className="content" dangerouslySetInnerHTML={{__html: content}}>
                </div>
            </DetailWrapper>
        </div>
    }
    componentDidMount(){
        const id = this.props.match.params.id
        console.log(id)
        this.props.getDetail(id)
    }
}
const mapState = (state) => ({
    title: state.getIn(['detail','title']),
    content: state.getIn(['detail','content']),
})
const mapDispatch = (dispatch) => ({
    getDetail(id){
        dispatch(actionCreater.getDetail(id))
    }
})
export default connect(mapState,mapDispatch)(withRouter(Detail))